<template>
  <div>
    <h3 class="title">歌手推荐</h3>
    <div class="area common">
      <template v-for="(item, index) in areaList">
        <div
          :class="areaActive == index ? 'active' : ''"
          @click="areaChange(item.areaId, index)"
        >
          {{ item.aname }}
        </div>
      </template>
    </div>
    <div class="type common">
      <template v-for="(item, index) in typeList">
        <div
          :class="typeActive == index ? 'active' : ''"
          @click="typeChange(item.type, index)"
        >
          {{ item.name }}
        </div>
      </template>
    </div>
    <div class="info">
      <div class="info-item" v-for="item in dataList">
        <img v-lazy="item.picUrl" alt="" />
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState,mapGetters} from "vuex"
export default {
  data() {
    return {
      // dataList: [],
      checked: true,
      areaList: [
        {
          aname: "全部",
          areaId: -1,
        },
        {
          aname: "华语",
          areaId: 7,
        },
        {
          aname: "欧美",
          areaId: 96,
        },
        {
          aname: "日本",
          areaId: 8,
        },
        {
          aname: "韩国",
          areaId: 16,
        },
        {
          aname: "其他",
          areaId: 0,
        },
      ],
      typeList: [
        {
          name: "全部",
          type: -1,
        },
        {
          name: "男歌手",
          type: 1,
        },
        {
          name: "女歌手",
          type: 2,
        },
        {
          name: "乐队",
          type: 3,
        },
      ],
    };
  },
 computed:{
   ...mapGetters(['dataList']),
   ...mapGetters(['areaActive']),
   ...mapGetters(['typeActive']),
 },
  async mounted() {
    this.getList("area",0,-1);
    // let data = await this.$api.getSingers({});
    // console.log(data);
    // this.dataList=data.artists;
  },
  methods: {
    areaChange(id, index) {
      var type = "area";
      this.getList(type, index, id);
    },
    typeChange(id, index) {
      var type = "type";
      this.getList(type, index, id);
    },
    // type是用来区分是地区的改变还是类型的改变
    // index是当前的激活的索引
    async getList(val, index, id) {
      // 把最新的数据更新到state中
      this.$store.commit('setState',{val,index,id});
      this.$store.dispatch('getSingers',{val,id});
    },
  },
};
</script>

<style scoped lang="scss">
.common {
  padding: 0 15px;
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
}
.common div {
  font-size: 12px;
  flex: 0 0 12.5%;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #ddd;
  color: #000;
}
.active {
  background: #f35d4a;
  color: white;
}
.info {
  padding: 15px 0;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-bottom: 50px;
}
.info-item {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  margin-left: calc(calc(100% - 300px) / 4);
}
.info-item img {
  width: 100%;
  height: 80%;
  border-radius: 10%;
  object-fit: cover;
}
.info-item p {
  text-align: center;
  font-size: 10px;
}
.title {
  padding-left:15px;
}
</style>
